<template>
	<view>
		<view class="cq">
			<img src="https://www.leedong.top/img/cq.png" v-show="show" alt="">
			<img src="https://www.leedong.top/img/cqtx.gif" v-show="hide" alt="">
			
		</view>
		<view class="start" @click="start">
			<text>开始抽签</text>
		</view>
		<view class="xaingxi" v-if="list!=null">
			<view class="c">
				<view class="t">
					<text class="shu"></text>
					<text class="f">卦象</text>
				</view>
				<view class="m">
					<text>结果:</text>
					<text>{{list.title}}</text>
				</view>
				<view class="m">
					
					<text>{{list.qian}}</text>
				</view>
				<view class="m">
	
					<text>{{list.jie}}</text>
				</view>
				<view class="m">
					
					<text>{{list.time}}</text>
				</view>
				
			
			</view>
		</view>
		<view class="" v-else  class="bottom">
			<p>诸葛神数384签诗随机抽签!仅供娱乐，切勿迷信</p>
		</view>
		
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				show:true,
				hide:false,
				list:null
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"抽一签,看看你的运势吧",
						imageUrl:'https://www.leedong.top/img/cq.png'
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '抽一签,看看你的运势吧',
					imageUrl:'https://www.leedong.top/img/cq.png'
				
			}
		},
		methods: {

			start(e) {
			this.show=false;
			this.hide=true;
				throttle(this.getData(), 2000)
			},
			confirm(e) {
				console.log(e);
			},
			getData() {
				uni.showLoading({
					title:'加载中'
				})
				this.$api.cq().then(res => {
					if(res.code==200){
						setTimeout(()=>{
							this.list=res;
							this.show=true;
							this.hide=false;
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'noe'
						})
					}
					uni.hideLoading()
					
				})
			}
		}
	}
</script>

<style lang="scss">

.cq{
	text-align: center;
	
	img{
		width: 176px;
		height: 296px;
		aspect-ratio: 1;
		    object-fit: cover;
		    object-position: center;
	}
}
.start{
		width: 100%;
		text-align: center;
		text{
			width: 120px;
			display: inline-block;
			background-color: #e32616;
			font-size: 30rpx;
			color: #fff;
			padding: 10px;
			border-radius: $uni-border-radius-base;
			line-height: 15px;
			margin-top: 20px;
		}
		
	}
	.xaingxi {
			padding: 20px;
		.c {
			margin-top: 10px;
	
			.t {
				font-size: 30rpx;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				padding: 10px;
	
				display: flex;
	
				.f {
					padding: 0 10rpx;
				}
	
				.shu {
					width: 4px;
					height: 24px;
	
					background-color: #9d9e97;
				}
			}
	
		.m{
			font-size: 28rpx;
			margin-top: 20rpx;
			text{
				user-select: all;
			}
		}
			.qg{
				margin-top: 10px;
			
			}
		}
	}
</style>
